<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchMap.data" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="searchMap.data.copyTitle"
          placeholder="文案标题"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="searchMap.data.typeId"
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.typeId"
            :label="item.label"
            :value="item.typeId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search()">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="addCopy();gooodSpec={}">添加文案</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="delChoose()">批量删除</el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="multipleTable"
      :data="copyList"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="130"> </el-table-column>
      <el-table-column
        v-model="entity.copyTitle"
        prop="copyTitle"
        label="文案标题"
        width="100"
      >
      </el-table-column>
      <el-table-column
        v-model="entity.wxbGoods.goodsName"
        prop="wxbGoods.goodsName"
        label="商品名称"
        width="100"
      >
      </el-table-column>
      <el-table-column
        v-model="entity.wxbCustomer.customerName"
        prop="wxbCustomer.customerName"
        label="商户名称"
        width="100"
      >
      </el-table-column>
        <el-table-column
        v-model="entity.copyLink"
        prop="copyLink"
        label="文案链接"
        width="140"
      >
      </el-table-column>
        <el-table-column
        v-model="entity.copyContent"
        prop="copyContent"
        label="文案内容"
        width="100"
      >
      </el-table-column>


      <el-table-column prop="typeId" label="文案类型" width="100">
        <template slot-scope="scope">
          <p v-show="scope.row.typeId == 3">微信文案</p>
          <p v-show="scope.row.typeId == 1">站内文案</p>
          <p v-show="scope.row.typeId == 2">日志文案</p>
        </template>
      </el-table-column>
      <el-table-column label="文案图片" width="180">
        <template slot-scope="scope">
          <div><img :src="scope.row.imgUrls" width="100px"/></div>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" width="260">
        <template slot-scope="scope">
          <div>
            <el-button
              type="warning"
              icon="el-icon-delete"
              @click="delObject(scope.row)"
              >删除</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="updateObject(scope.row)"
              >修改</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchMap.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.total"
    >
    </el-pagination>
    <el-dialog
      :title="gooodSpec.copyId?'修改分类':'添加分类'"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="gooodSpec">
        <el-form-item label="文案标题" label-width="80px">
          <el-input v-model="gooodSpec.copyTitle" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文案链接" label-width="80px">
          <el-input v-model="gooodSpec.copyLink" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文案内容" label-width="80px">
          <el-input v-model="gooodSpec.copyContent" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="选择商品" label-width="80px">
          <el-select v-model="gooodSpec.goodsId" placeholder="选择商品">
            <el-option v-for="(item, index) in goods"  :label="item.goodsName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文案类型" label-width="80px">
          <el-select v-model="gooodSpec.typeId" placeholder="文案类型">
            <el-option label="站内文案" value="1"></el-option>
            <el-option label="日志文案" value="2"></el-option>
            <el-option label="微信文案" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文案图片" label-width="80px">
          <el-upload
            ref="imgUpload"
            action="http://localhost:8081/upload"
            :headers="this.headers"
            list-type="picture-card"
            name="headerImage"
            :on-success="uploadSuccess"
          >
            <img :src="this.gooodSpec.imgUrls" />
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveDate()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  search,
  delSelect,
  delOne,
  addOrUpdate,
  findGoods,
} from "@/api/goods-copy";
export default {
  data() {
    return {
      headers:{},
      options: [
        {
          typeId: 3,
          label: "微信文案",
        },
        {
          typeId: 1,
          label: "站内文案",
        },
        {
          typeId: 2,
          label: "日志文案",
        },
      ],
      dialogFormVisible: false, //编辑弹窗开关 添加弹窗开关
      visible: false, //删除弹窗开关
      goods: [],
      copyList: [],
      selectionList: [],
      entity: {
        wxbGoods: {},
        wxbCustomer: {},
      },
      total: 0,
      searchMap: {
        page: 1,
        limit: 5,
        data: {},
      },
      delData: {},
      editDialogData: {},
      gooodSpec: {},
    };
  },
  methods: {
    uploadSuccess(response, file, fileList) {
      this.gooodSpec.imgUrls = response.data;
    },
    //单个删除
    delObject(row) {
      this.$confirm("此操作将永久删除文案, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delOne(row).then((res) => {
          if (res.success) {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success",
            });
            this.search();
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        });
      });
    },
    //是否选中
    handleSelectionChange(selection) {
      this.selectionList = [];
      selection.forEach((element) => {
        this.selectionList.push(element);
      });
    },
    //批量删除
    delChoose() {
      var that = this;
      this.delData = that.selectionList;
      this.$confirm("此操作将永久删除文案, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delSelect(this.delData).then((res) => {
          if (res.success) {
            that.search();
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success",
            });
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        });
      });
    },

    //搜索
    search() {
      var _this = this;
      this.searchMap.data.customerId=sessionStorage.getItem("token")
      search(this.searchMap).then((res) => {
        _this.copyList = res.data;
        //_this.entity = res.data;
        _this.total = res.total;
      });
    },
    //添加
    addCopy() {     
      this.$nextTick(() => {
        this.$refs.imgUpload.clearFiles(); //清空图片
      });
      this.headers={"token":sessionStorage.getItem("token")}
      this.findGoods();
      this.dialogFormVisible = true;
    },
    //修改
    updateObject(row) {    
      let that = this;
      that.headers={"token":sessionStorage.getItem("token")}
      this.$nextTick(() => {
        this.$refs.imgUpload.clearFiles(); //清空图片
      });
      that.$set(that.gooodSpec,'copyTitle',row.copyTitle);
      that.$set(that.gooodSpec,'copyLink',row.copyLink);
      that.$set(that.gooodSpec,'copyContent',row.copyContent);
      that.$set(that.gooodSpec,'customerId',row.customerId);
      that.$set(that.gooodSpec,'copyId',row.copyId);
      that.findGoods();
      this.dialogFormVisible = true;
    },
    saveDate() {
      this.gooodSpec.customerId = sessionStorage.getItem("token")
      this.addOrUpdate();
      this.gooodSpec = {};
    },
    //发送请求
    addOrUpdate() {
      var entity = this.gooodSpec;      
      this.dialogFormVisible = false;
      addOrUpdate(entity).then((res) => {
        if (res.success) {
          this.$message({
            showClose: true,
            message: res.msg,
            type: "success",
          });
          this.search();
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: "error",
          });
        }
      });
    },

    handleSizeChange(size) {
      this.searchMap.limit = size;
      this.search();
    },
    handleCurrentChange(currentPage) {
      this.searchMap.page = currentPage;
      this.search();
    },
    //查询商品名
    findGoods() {
        this.goods=[]
      findGoods({ sellerId: sessionStorage.getItem("token") }).then((res) => {
        this.goods = res;
      });
    },
  },
  created() {
    let that = this;
    that.search();
  },
};
</script>